<template>
<div style="padding: 16px;">
<Row>
<Col span="6">
<Button icon="md-add" shape="circle" type="primary" @click="modal1 = true">添加</Button>
<Modal v-model="modal1"  @on-ok="handleAdd" @on-cancel="handleCancel" 
:mask-closable="false" :loading="true">
  <template #header>
	<p><Icon custom="iconfont icon-tianjiarenyuan" /><span>&nbsp;新增用户</span></p>
  </template>
  <Form ref="formItems" :model="formItem" :label-width="80" :rules="ruleValidate">
  	<FormItem label="工号" prop="uid">
       <Input v-model="formItem.uid" placeholder="请输入工号"></Input>
    </FormItem>
    <FormItem label="密码" prop="password">
       <Input v-model="formItem.password" placeholder="请输入密码"></Input>
    </FormItem>
    <FormItem label="姓名" prop="uname">
       <Input v-model="formItem.uname" placeholder="请输入姓名"></Input>
    </FormItem>
	<FormItem label="部门" prop="dept">
	   <Input v-model="formItem.dept" placeholder="请输入部门"></Input>
	</FormItem>
    <FormItem label="性别" prop="sex">
      <RadioGroup v-model="formItem.sex">
        <Radio label="男" border>男</Radio>
        <Radio label="女" border>女</Radio>
   	  </RadioGroup>
    </FormItem>
    <FormItem label="角色" prop="role">
       <Select v-model="formItem.role">
           <Option v-for="n in this.roles" :key="n.code" :value="n.code">{{n.name}}</Option>
       </Select>
    </FormItem>
    <FormItem label="电话" prop="phone">
       <Input v-model="formItem.phone" placeholder="请输入电话"></Input>
    </FormItem>
	<FormItem label="执法证号" prop="certificate">
	   <Input v-model="formItem.certificate" placeholder="请输入执法证号"></Input>
	</FormItem>
    
  </Form>
</Modal>
</Col>
<Col span="14"></Col>
<Col span="4">
<Input search enter-button placeholder="工号或姓名" @on-search="handleSearch"/>
</Col>
</Row>
<br>
<Table ref="table" :max-height="maxHeight" stripe :columns="columns" :data="data" border row-key="uid" highlight-row>
	<template #uname="{ row, index }">
		<Input type="text" v-model="editUname" v-if="editIndex === index" /> <span v-else>{{ row.uname }}</span>
	</template>
	<template #sex="{ row, index }">
	<RadioGroup v-model="editSex" v-if="editIndex === index">
        <Radio label="男"></Radio>
        <Radio label="女"></Radio>
    </RadioGroup><span v-else>{{ row.sex }}</span>
	</template>
	<template #dept="{ row, index }">
		<Input type="text" v-model="editDept" v-if="editIndex === index" /> <span v-else>{{ row.dept }}</span>
	</template>
	<template #phone="{ row, index }">
		<Input type="text" v-model="editPhone" v-if="editIndex === index" /> <span v-else>{{ row.phone }}</span>
	</template>
	<template #certificate="{ row, index }">
		<Input type="text" v-model="editCertificate" v-if="editIndex === index" /> <span v-else>{{ row.certificate }}</span>
	</template>
	<template #action="{ row, index }">
      <div class="ty-flex-row-around">
	      <span v-if="editIndex === index">
	        <Button icon="md-checkmark" type="success" @click="handleSave(index)"></Button> &nbsp;
	        <Button icon="md-close" type="error" @click="editIndex = -1"></Button>
	      </span>
	      <span v-else>
	       	<Button custom-icon="iconfont icon-bianji" @click="handleEdit(row, index)" shape="circle"></Button>&nbsp;
	       	<Button custom-icon="iconfont icon-zhongzhimima" @click="handleResetPassword(row, index)" shape="circle"></Button>
	      </span>
	      <span>
	        <Button custom-icon="iconfont icon-laji" @click="handleDeleteRow(row,index)" shape="circle"></Button>
	      </span>
	      <span>
	      	<Button custom-icon="iconfont icon-quanxian" @click="handleRole(row,index)" shape="circle">配置权限</Button>
	      	<Drawer title="配置权限" v-model="drawer1" width="500">
				<div>
					<Button custom-icon="iconfont icon-save" shape="circle" type="primary" @click="handleRoleSave">保存</Button>
				</div>
	      		
	      		<CheckboxGroup v-for="n in navFirst" :key="n.id" v-model="MainNav[n.id]" size="large">
			   		<Divider orientation="left" size="default"><Icon :type="n.icon"></Icon>{{n.text}}</Divider>
			        <Checkbox v-for="sn in navSecond(n.text)" :key="sn.id" :label="sn.id" size="default" border v-margin="10">
			            <Icon :type="sn.icon"></Icon>
			            <span>{{sn.text}}</span>
			        </Checkbox>
			    </CheckboxGroup>
	      	</Drawer>
	      </span>
      </div>
    </template>
</Table>
</div>
</template>
<script>
export default {
	data () {
        return {
			navList:[],
        	editRow:{},
        	editIndex:-1,
        	modal1: false,
        	drawer1:false,
        	modalDelete:false,
        	editUname:'',
        	editSex:'',
        	editDept:'',
        	editPhone:'',
			editCertificate:'',
        	columns:[
        		{title:'工号',key:'uid',tooltip:true},
        		{title:'姓名',slot:'uname'},
				{title:'部门',slot:'dept',sortable: true},
        		{title:'性别',slot:'sex'},
        		{title:'电话',slot:'phone'},
        		{title:'执法证号',slot:'certificate'},
        		{title:'操作',slot:'action',width:280}
        	],
        	data:[],
        	roles:[],
        	formItem:{
        		uid:'',
        		uname:'',
        		password:'',
        		sex:'',
        		dept:'',
        		phone:'',
        		role:'',
				certificate:''
        	},
        	ruleValidate:{
        		uid:[{required: true, message: '账号不能为空', trigger: 'blur' }],
        		uname:[{required: true, message: '用户名不能为空', trigger: 'blur' }],
        		password:[{required: true, message: '密码不能为空', trigger: 'blur' }],
        		dept:[{required: true, message: '部门不能为空', trigger: 'change'}]
        	},
        	searchKey:'',
        	MainNav:{}
        }
    },
	computed:{
	  navFirst(){
      	return this.navList.filter(n=>n.ptext==null)
      },
      navSecond(){
      	return (a)=>this.navList.filter(n=>n.ptext===a)
      },
	  maxHeight(){
	    return window.innerHeight-220
	  }
	},
	methods: {
	   handleAdd () {
		   this.$refs.formItems.validate((valid) => {
               if (valid) {
				this.modal1=false
				this.$axios.post("mainSetting1FormAdd.action",this.formItem).then(res=>{
	    		   if(res.data=='suc'){
	    			   this.$Message.success('用户添加成功')
	    			   this.getMainSetting1TableList(this.searchKey)
	    		   }else{		   
	    			   this.$Message.error('用户添加失败'+res.data)
	    		   }
	    		   this.$refs.formItems.resetFields()
		    	})
		    	
               } else {
            	   that.$Message.error('校验不通过')
               }
           }) 	   
	   },
	   handleCancel () {
	       this.$refs.formItems.resetFields()
	   },
	   handleEdit (row, index) {
	        this.editUname = row.uname;
	        this.editSex = row.sex;
	        this.editDept = row.dept;
	        this.editPhone = row.phone;
			this.editCertificate=row.certificate;
	        this.editIndex = index;
			
	   },
	   handleResetPassword(row, index){
		   this.$Modal.confirm({title: '确定要密码重置？',onOk: () => {
			   this.$axios.post("mainSetting1ResetPassword.action",{str1:row.uid}).then(res=>{
       			   if(res.data=='suc'){
           			   this.$Message.success('密码重置成功')
           		   }else{		   
           			   this.$Message.error('密码重置失败'+res.data)
           		   }
       		   })
           }});
	   },
	   handleSave (index) {
	        this.data[index].uname = this.editUname;
	        this.data[index].sex = this.editSex;
	        this.data[index].dept = this.editDept;
	        this.data[index].phone = this.editPhone;
			this.data[index].certificate = this.editCertificate;
	        this.editIndex = -1;
	        this.$axios.post("mainSetting1UpadateRow.action",this.data[index]).then(res=>{
			   if(res.data=='suc'){
    			   this.$Message.success('用户更新成功')
    		   }else{		   
    			   this.$Message.error('用户更新失败'+res.data)
    			   this.getMainSetting1TableList(this.searchKey)
    		   }
		   })
	   },
	   handleDeleteRow(row,index){
		    this.$Modal.confirm({title: '确定要删除用户？',onOk: () => {
           	   this.$axios.post("mainSetting1DeleteRow.action",{str1:row.uid}).then(res=>{
       			   if(res.data=='suc'){
           			   this.$Message.success('用户删除成功')
           			   this.getMainSetting1TableList(this.searchKey)
           		   }else{		   
           			   this.$Message.error('用户删除失败'+res.data)
           		   }
       		   })
            }})	   
	   },
	   handleRole(row,index){
			this.drawer1 = true
			this.editRow=row
			this.$axios.post("mainSetting1UserFuns.action",{str1:row.uid}).then(res=>{
				this.MainNav=res.data
			}) 
	   },
	   handleRoleSave(){
		 var navs=[]
		 for(var i in this.MainNav){
			 navs.push(...this.MainNav[i])
		 }
		 this.$axios.post("mainSetting1UserFunsSave.action",{str1:this.editRow.uid,list1:navs}).then(res=>{
			if(res.data=='suc'){
   			   this.$Message.success('权限配置成功')
   		    }else{		   
   			   this.$Message.error('权限配置失败'+res.data)
   		    }
			this.drawer1=false
		 })
	   },
	   handleSearch(value){
		   this.searchKey=value
		   this.getMainSetting1TableList(this.searchKey)
	   },
	   getMainSetting1TableList(value){
		   this.$axios.post("mainSetting1TableList.action",{str1:value}).then(res=>{
				this.data=res.data
			}) 
	   },
	   getMainSetting1RoleList(){
		   this.$axios.post("mainSetting1RoleList.action").then(res=>{
				this.roles=res.data
			}) 
	   },
	   mainSetting1NavList(){
			this.$axios.post("mainSetting1NavList.action").then(res=>{
				this.navList=res.data
			})
	   }
	},
	created(){
		this.getMainSetting1TableList(this.searchKey)
		this.getMainSetting1RoleList()
		this.mainSetting1NavList()
	}
}
</script>
<style scoped>
</style>